<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #maps {
        height: 800px;
        white-space: nowrap;
    }

    li {
        width: 20px;
        height: 800px;
        /* float: left; */
        display: inline-block;
        vertical-align: bottom;
    }

    img {
        width: 20px;
        height: 800px;
    }
</style>

<body>
    <!-- <ul id="maps"> -->
    <!-- <li><img src="https://pic.3zitie.cn/gaoqingpic/20168/6173/szzywxeb_01.jpg"
                loadsrc="https://pic.3zitie.cn/gaoqingpic/20168/6173/szzywxeb_01.jpg" title="鼠标左右滑动看全图"
                style="opacity: 1;"></li> -->
    <!-- </ul> -->
    <button onclick="">下载</button>
</body>
<script>
    // https://pic.3zitie.cn/gaoqingpic/20168/6173/szzywxeb_01.jpg
    let arr = []
    let str = document.createElement('ul');
    str.id = 'maps'
    for (let i = 1; i <= 654; i++) {
        arr.push(`https://pic.3zitie.cn/gaoqingpic/20168/6173/szzywxeb_${i > 9 ? i : '0' + i}.jpg`)
        let newli = document.createElement('li')
        let newimg = document.createElement('img')
        newimg.src = `https://pic.3zitie.cn/gaoqingpic/20168/6173/szzywxeb_${i > 9 ? i : '0' + i}.jpg`
        newli.appendChild(newimg)
        str.appendChild(newli)
        // str+=`<li><img src="${`https://pic.3zitie.cn/gaoqingpic/20168/6173/szzywxeb_${i > 9 ? i : '0' + i}.jpg`}"
        //         style="opacity: 1;"></li>`
    }

    let doc = document.querySelector('body')
    doc.appendChild(str)
    console.log(arr);
</script>

</html>